<template>
	<view>
		<!-- 登录 -->
		<view class="one">
			<navigator url="/pages/login/login-log/login-log" open-type="navigate"><view class="sign-in">登录</view></navigator>
		</view>
		<!-- 登录下内容 -->
		<view>
			<!-- 我的书影音.... -->
			<view class="two">
				<view class="two1"><b>我的书影音</b></view>
				<view class="two2">登录查看</view>
				<view style="font-size: 18px;color: #9A9A9A;">&nbsp;></view>
			</view>

			<!-- 三大分析 -->
			<view style="margin-top: 15px;">
				<!-- 观影分析 -->
				<view class="three">
					<!-- 左边图片部分 -->
					<view>
						<image class="img" src="../../static/analyze1.png"></image>
					</view>
					<!-- 右边内容部分 -->
					<view style="display: flex;border-bottom: 1px solid #F3F3F3;">
						<view class="three1">
							<view class="three1-1">观影分析</view>
							<view class="three1-2">
								<view style="font-size: 20px;">0<text style="font-size:12px;">&nbsp;看过</text></view>
							</view>
						</view>
						<view class="three2">
							<view>标记10部影片</view>
							<view>开启观影分析</view>
						</view>
						<view style="display: flex;">
							<view class="three3"><b>立即开启</b></view>
							<view><image src="../../static/gggg2.png" class="jiantou"></image></view>
							<!-- <view style="font-size: 35px;margin-top: 18px;color: #868686;">></view> -->
						</view>
					</view>
				</view>

				<!-- 读书分析 -->
				<view class="three">
					<!-- 左边图片部分 -->
					<view>
						<image class="img" src="../../static/analyze2.png"></image>
					</view>
					<!-- 右边内容部分 -->
					<view style="display: flex;border-bottom: 1px solid #F3F3F3;">
						<view class="three1">
							<view class="three1-1">读书分析</view>
							<view class="three1-2">
								<view style="font-size: 20px;">0<text style="font-size:12px;">&nbsp;读过</text></view>
							</view>
						</view>
						<view class="three2">
							<view>标记10本书</view>
							<view>开启读书分析</view>
						</view>
						<view style="display: flex;">
							<view class="three3"><b>立即开启</b></view>
							<view><image src="../../static/gggg2.png" class="jiantou"></image></view>
							<!-- <view style="font-size: 35px;margin-top: 18px;color: #868686;">></view> -->
						</view>
					</view>

				</view>

				<!-- 音乐分析 -->
				<view class="three">
					<!-- 左边图片部分 -->
					<view>
						<image class="img" src="../../static/analyze3.png"></image>
					</view>
					<!-- 右边内容部分 -->
					<view style="display: flex">
						<view class="three1">
							<view class="three1-1">音乐分析</view>
							<view class="three1-2">
								<view style="font-size: 20px;">0<text style="font-size:12px;">&nbsp;听过</text></view>
							</view>
						</view>
						<view class="three2">
							<view>标记10张唱片</view>
							<view>开启音乐分析</view>
						</view>
						<view style="display: flex;">
							<view class="three3"><b>立即开启</b></view>
							<view><image src="../../static/gggg2.png" class="jiantou"></image></view>
							<!-- <view style="font-size: 35px;margin-top: 18px;color: #868686;">></view> -->
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>
<style>
	/* 设置页面背景色 */
	page{
		background-color: #FFFFFF;
	}
</style>
<style scoped>

	/* 设置登录背景样式 */
	.one {
		width: 750rpx;
		height: 417rpx;
		background-color: #4DBC5E;

		display: flex;
		justify-content: center;
		align-items: center;
	}

	/* 设置登录按钮样式 */
	.sign-in {
		width: 375rpx;
		height: 83rpx;
		color: #324D35;
		font-size: 20px;
		border-radius: 20px;
		background-color: #FFFFFF;

		display: flex;
		justify-content: center;
		align-items: center;

	}
	.login-in{
		
	}

	/* 第二部分 */
	.two {
		margin-top: 21rpx;
		margin-left: 31rpx;
		margin-right: 52rpx;
		margin-bottom: 21rpx;

		display: flex;
	}

	.two1 {
		width: 417rpx;
		font-size: 15px;
	}

	.two2 {
		font-size: 12px;
		color: #9A9A9A;
		margin-left: 115rpx;

		display: flex;
		justify-content: center;
		align-items: center;
	}

	/* 第三部分样式 */
	.three {
		height: 146rpx;
		display: flex;
		flex-direction: row;
	}

	/* 设置图片样式 */
	.img {
		width: 125rpx;
		height: 146rpx;

	}

	.three1 {
		width: 102rpx;
		height: 167rpx;
		display: flex;
		flex-direction: column;
	}

	.three1-1 {
		margin-top: 10rpx;
		font-size: 12px;
	}

	.three1-2 {
		color: #818181;
		margin-top: 38rpx;

	}

	.three2 {
		width: 156rpx;
		height: 167rpx;
		font-size: 12px;
		color: #C2C2C2;
		margin-left: 125rpx;
		margin-top: 52rpx;
		/* display: flex;
		flex-direction: column;
		justify-content: flex-end; */
	}

	.three3 {
		width: 60px;
		height: 20px;
		font-size: 12px;
		color: #545454;
		border-radius: 4px;
		background-color: #F5F5F5;
		margin-top: 30px;
		margin-left: 10px;

		display: flex;
		justify-content: center;
		align-items: center;
	}
	.jiantou{
		width: 20px;
		height: 20px;
		margin-top: 30px;
		margin-left: 5px;
	}
</style>
